<template>
	<view class="products">
		<view class="sticky" :style="{top: offsetTop + 'px'}">
			<u-tabs :list="indexTags" active-color="#CB712B" :current="indexTagCurrent" @change="changeIndexTag" />
		</view>
		<view class="list">
			<Products :list="goods" />
		</view>
	</view>
</template>

<script>
	import {
		indexTagApi,
		homeDataApi,
	} from '@/api/index.js'
	import Products from "@/components/products/index.vue"
	export default{
		data(){
			return{
				indexTagCurrent: 0,
				indexTags: [],
				goods: [],
				offsetTop: 0,
			}
		},
		components: {
			Products
		},
		created() {
			this.getData()
			this.setOffsetTop()
		},
		methods: {
			changeIndexTag(index) {
				this.indexTagCurrent = index
				this.getHomeData()
			},
			getData(){
				this.getIndexTag()
			},
			async getIndexTag() {
				let {
					data
				} = await indexTagApi()
				this.indexTags = data.map(item => {
					return {
						...item,
						name: item.type_name
					}
				})
				this.getHomeData()
			},
			setOffsetTop() {
				uni.getSystemInfo({
					success: (res) => {
						this.offsetTop = res.statusBarHeight + 44
						console.log(this.offsetTop);
					}
				})
			},
			async getHomeData() {
				let tag = this.indexTags[this.indexTagCurrent]
				console.log('tag==>', tag);
				let {
					data
				} = await homeDataApi({
					type_id: tag.id
				})
				this.goods = data
			},
		},
		onReachBottom(){
			
		}
	}
</script>

<style scoped lang="scss">
	.products{
		background-color: #EDEFF1;
		padding: 20rpx 0;
	}
	.list{
		padding: 20rpx 0;
	}
	.sticky {
		position: sticky;
		z-index: 1000;
	}
</style>